<template>
  <div class="content">
    <div class="detail">
      <div class="head"><span>用户信息</span></div>
      <div class="info">
        <div class="pic"></div>
        <div class="btn">更换头像</div>
        <table>
          <tr>
            <td>姓名 :</td>
            <td>{{ user.name }}</td>
          </tr>
          <tr>
            <td>邮箱号码 :</td>
            <td>{{ user.email }}</td>
          </tr>
          <tr>
            <td>角色 :</td>
            <td>{{ user.identity }}</td>
          </tr>
          <tr>
            <td>密码 :</td>
            <td>
              <span class="cp blue" @click="changePasswordShow = true">
                修改密码</span
              >
            </td>
          </tr>
        </table>
      </div>
    </div>
    <changePassword :flag="changePasswordShow" @close="close"></changePassword>
  </div>
</template>

<script>
import changePassword from '../../userinfo/components/changePassword'
export default {
  components: {
    changePassword
  },
  data () {
    return {
      id: this.$route.params.id,
      changePasswordShow: false
    }
  },
  computed: {
    info () {
      const index = this.$store.state.cfManage.tableData.findIndex((item) => {
        return item.id - this.$route.params.id === 0
      })
      return this.$store.state.cfManage.tableData[index]
    },
    user () {
      return this.$store.state.user.info
    }
  },
  methods: {
    toaddress (id) {
      this.$router.push({
        path: `/userManage/main/detail/address/${id}`
      })
    },
    toproposal (id) {
      this.$router.push({
        path: `/userManage/main/detail/proposal/${id}`
      })
    },
    close () {
      this.changePasswordShow = false
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  .detail {
    min-height: 800px;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 8px;
    // margin-top: 26px;
    padding: 0 24px;
    position: relative;
  }
  .pic {
    width: 120px;
    height: 120px;
    border: 1px solid #ccc;
    position: absolute;
    top: 127px;
    left: 44px;
  }
  .btn {
    position: absolute;
    top: 280px;
    left: 68px;
    width: 72px;
    height: 28px;
    opacity: 1;
    background: #ffffff;
    border: 1px solid #3377ff;
    border-radius: 5px;
    text-align: center;
    line-height: 28px;
    font-size: 12px;
    color: #304eec;
  }
  .head {
    width: 100%;
    height: 78px;
    border-bottom: 1px solid #e6e9f0;
    position: relative;
    font-size: 16px;
    font-weight: 500;
    color: #1b1f35;
    span {
      position: absolute;
      bottom: 20px;
    }
  }
  .info {
    margin-top: 53px;
    margin-left: 200px;

    tr {
      color: #3d4966;
      vertical-align: top;
      td:nth-child(1) {
        width: 100px;
        height: 50px;
        color: #1b1f35;
        text-align: right;
      }
      td:nth-child(2) {
        padding-left: 40px;
        width: 240px;
      }
    }
    .proposal {
      width: 200px;
      height: 44px;
      line-height: 22px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      //   text-overflow: ellipsis !important;
    }
  }
}
</style>
